<template lang="html">
  <div class="nav_list">
     <!-- 导航四个title -->
     <ul>
        <li class="list_li" @click="show1()">目的地<i></i></li>
        <li class="list_li" @click="show2()">行程时间<i></i></li>
        <li class="list_li" @click="show3()">综合排序<i></i></li>
        <li class="list_li" @click="show4()">筛选<i></i></li>
     </ul>
     <!-- title下对应的部分 -->
     <div class="tab_list">
        <div v-show="a" class="first_tab">
           <!-- 目的地对应 -->
           <div class="first_left">
              <ul class="first_left_nav">
                 <li>不限</li>
                 <li>欧洲</li>
                 <li>大洋洲</li>
                 <li>非洲</li>
                 <li>亚洲</li>
                 <li>北美洲</li>
                 <li>南美洲</li>
              </ul>
           </div>
           <div class="first_right_nav">
              <dl class="">
                 <dt>不限</dt>
                 <dd>
                    <ul>
                       <li @click="list_btn"><img src="../../static/imgs/China.png" alt="">荷兰 <span v-show="span_show"></span></li>
                       <li><img src="../../static/imgs/1 (1).png" alt="">葡萄牙</li>
                       <li><img src="../../static/imgs/1 (2).png" alt="">黑山</li>
                       <li><img src="../../static/imgs/1 (3).png" alt="">英国</li>
                       <li><img src="../../static/imgs/1 (4).png" alt="">列支登士敦</li>
                       <li><img src="../../static/imgs/1 (1).png" alt="">克罗地亚</li>
                       <li><img src="../../static/imgs/1 (2).png" alt="">希腊</li>
                       <li><img src="../../static/imgs/1 (3).png" alt="">瑞士</li>
                       <li><img src="../../static/imgs/1 (4).png" alt="">罗马尼亚</li>
                       <li><img src="../../static/imgs/1 (1).png" alt="">阿尔巴尼亚</li>
                       <li><img src="../../static/imgs/1 (2).png" alt="">立陶宛</li>
                       <li><img src="../../static/imgs/1 (3).png" alt="">捷克</li>
                       <li><img src="../../static/imgs/1 (4).png" alt="">波兰</li>
                       <li><img src="../../static/imgs/1 (1).png" alt="">奥地利</li>
                       <li><img src="../../static/imgs/1 (2).png" alt="">卢森堡</li>
                       <li><img src="../../static/imgs/1 (3).png" alt="">瑞典</li>
                       <li><img src="../../static/imgs/1 (4).png" alt="">德国</li>
                       <li><img src="../../static/imgs/1 (1).png" alt="">马其顿</li>
                       <li><img src="../../static/imgs/1 (2).png" alt="">匈牙利</li>
                    </ul>
                 </dd>
              </dl>
           </div>
        </div>

        <!-- 行程时间对应部分 -->
        <div v-show="b" class="first_tab">
          <div class="second_box">
            <div class="second_top">
               <p>行程天数</p>
               <input type="range" name="" value="">
            </div>
            <div class="second_center">
               <p>出发时间</p>
               <div class="second_time">
                  <span>1月</span>
                  <span>2月</span>
                  <span>3月</span>
                  <span>4月</span>
                  <span>5月</span>
                  <span>6月</span>
                  <span>7月</span>
                  <span>8月</span>
                  <span>9月</span>
                  <span>10月</span>
                  <span>11月</span>
                  <span>12月</span>
               </div>
            </div>
            <div class="second_bottom">
               <p>假期</p>
               <div class="second_jia">
                  <span>错峰出游</span>
                  <span>春节假期</span>
                  <span>元旦假期</span>
                  <span>五一小长假</span>
               </div>
            </div>
            <div class="second_btn">
               <span class='again_btn'>重置</span>
               <span @click="sure_btn2()" class="sure_btn">确定</span>
            </div>
          </div>
        </div>

        <!-- 综合排序对应部分 -->
        <div v-show='c'  class="first_tab">
           <div class="third_sort">
               <p @click="databtn1()">默认综合排序</p>
               <p @click="databtn2()">价格从低到高</p>
               <p @click="databtn3()">价格从高到低</p>
               <p @click="databtn4()">销量从高到低</p>
           </div>
        </div>

        <!-- 筛选对应部分 -->
        <div class="first_tab" v-show='d'>
            <div class="last_box">
               <p class="last_city">出发城市</p>
               <div class="last_city_list">
                  <span>北京</span>
                  <span>上海</span>
                  <span>广州</span>
                  <span>深圳</span>
               </div>
               <p class="last_city">产品等级</p>
               <div class="last_city_list2">
                  <span>精选型</span>
                  <span>大众型</span>
                  <span>豪华型</span>
               </div>
               <p class="last_city">特色标签</p>
               <div class="last_city_list">
                  <span>凯撒自营</span>
                  <span>联合发团</span>
                  <span>明星产品</span>
                  <span>新品发布</span>
               </div>
               <p class="last_city">游览主题</p>
               <div class="last_city_list">
                  <span>观光</span>
                  <span>文化遗产</span>
                  <span>走遍</span>
                  <span>亲自</span>
               </div>
               <div class="second_btn">
                  <span class='again_btn'>重置</span>
                  <span @click="again_btn()" class="sure_btn">确定</span>
               </div>
            </div>
        </div>


     </div>
  </div>
</template>

<script>
export default {
   data(){
      return{
         a: false,
         b: false,
         c: false,
         d: false,
         span_show: false,
         result: ''
      }
   },
   methods:{
      list_btn(){
         if (this.span_show == true) {
            this.span_show = false;
         }else{
            this.span_show = true;
         }
         // this.a = false;
      },
      show1(){
         if (this.a == true) {
            this.a = false;
         }else{
            this.a = true;
            this.b = false;
            this.c = false;
            this.d = false;
         }
      },
      show2(){
         if (this.b == true) {
            this.b = false;
         }else{
            this.b = true;
            this.a = false;
            this.c = false;
            this.d = false;
         }
      },
      show3(){
         if (this.c == true) {
            this.c = false;
         }else{
            this.c = true;
            this.a = false;
            this.b = false;
            this.d = false;
         }
      },
      show4(){
         if (this.d == true) {
            this.d = false;
         }else{
            this.d = true;
            this.a = false;
            this.b = false;
            this.c = false;
         }
      },
      sure_btn2(){
         this.b = false;
      },
      databtn1(){
         this.axios.get('http://txspring.cn:8080/synthesis').then(data=>{
            this.result = data.data.matches;
            this.$emit('datachuandi',this.result);
            this.c = false;
         })
      },
      databtn2(){
         this.axios.get('http://txspring.cn:8080/lowHigh').then(data=>{
            this.result = data.data.matches;
            this.$emit('datachuandi',this.result);
            this.c = false;
         })
      },
      databtn3(){
         this.axios.get('http://txspring.cn:8080/highLow').then(data=>{
            this.result = data.data.matches;
            this.$emit('datachuandi',this.result);
            this.c = false;
         })
      },
      databtn4(){
         this.axios.get('http://txspring.cn:8080/sell').then(data=>{
            this.result = data.data.matches;
            this.$emit('datachuandi',this.result);
            this.c = false;
         })
      },
      again_btn(){
         this.a = false;
         this.b = false;
         this.c = false;
         this.d = false;
      }
   }
}
</script>

<style lang="css">
*{
   margin:0;
   padding: 0;
}
.first_tab:nth-of-type(2){
   height: 20rem;
}
.first_tab:nth-of-type(3){
   height: 13rem;
}
.first_tab:nth-of-type(4){
   height: 23rem;
}
.nav_list{
   width: 100%;
   height: 18.8rem;
   position: fixed;
   top:4rem;
   z-index: 10;
}
.nav_list ul{
   list-style: none;
   display: flex;
   border-bottom: #e1e1e1 solid 0.02rem;
   box-shadow: 0.1rem 0.6px 0.6px #e1e1e1;
   background-color: #fff;
}
.nav_list ul li{
   width: 25%;
   font-size: 0.85rem;
   line-height: 2.5rem;
}
.nav_list ul li i{
   display: inline-block;
   width: 0.6rem;
   height: 0.6rem;
   color: #9d9d9d;
   border-bottom: #9d9d9d solid 0.05rem;
   border-right: #9d9d9d solid 0.05rem;
   transform: rotate(45deg);
   margin-left: 0.5rem;
   margin-top: -1rem;
}
.nav_list ul li:active{
   color: #00b0ec;
}
.nav_list ul li i:active{
   transform: rotate(-45deg);
}
.first_tab{
   width: 100%;
   height: 18.5rem;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   background-color: #fff;
   /*position: absolute;*/
   /*display: none;*/
}
.first_tab .first_left{
   width: 30%;
   height: 18.8rem;
   background-color: #fff;
   overflow: auto;
}
.first_left_nav{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.first_tab .first_left .first_left_nav>li{
   width: 100%;
   height: 2.7rem;
   font-size: 1rem;
   text-align: left;
   padding-left: 0.5rem;
}
.first_tab .first_left .first_left_nav>li:hover{
   background-color: #00b0ec;
   color:#fff;
}
.first_tab .first_right_nav{
   width: 70%;
   background-color: #fff;
   border-left: #e1e1e1 solid 0.02rem;
   overflow: auto;
}
.first_tab .first_right_nav dl{
   width: 90%;
   height: 18.8rem;
   margin:0 auto;
}
.first_tab .first_right_nav dl>dt{
   height: 2.5rem;
   line-height: 2.5rem;
   text-align: left;
   padding-left:0.5rem;
   border-bottom: #e1e1e1 solid 0.02rem;
}
.first_tab .first_right_nav dl>dd{
   position: relative;
}
.first_tab .first_right_nav dl>dd ul{
   display: flex;
   flex-direction: column;
}
.first_tab .first_right_nav dl>dd ul li{
   width: 97%;
   text-align: left;
   padding-left:0.5rem;
   border-right: #fff solid 0.1rem;
   border-bottom: #e1e1e1 solid 0.02rem;
   line-height: 2.7rem;
}
.first_tab .first_right_nav dl>dd ul li span{
   border-bottom: 0.15rem solid #f39800;
   border-right: 0.15rem solid #f39800;
   display: inline-block;
   height: 1.8rem;
   transform: rotate(45deg);
   width: 1rem;
   margin-right: 1rem;
   margin-top: 0.5px;
   float: right;
}
.first_tab .first_right_nav dl>dd ul li img{
   padding-right: 1rem;
}
.second_box{
   width: 95%;
   margin:0 auto;
}
.second_box .second_top p{
   text-align: left;
   padding-left: 1rem;
}
.second_box .second_top input{
   width: 90%;
   margin-top: 0.5rem;
}
.second_box .second_center{
   margin-top: 1rem;
}
.second_box .second_center p,.second_bottom{
   text-align: left;
   padding-left: 1rem;
   margin-bottom: 0.5rem;
}
.second_box .second_center .second_time{
   margin:0 auto;
   width: 94%;
   margin-bottom: 0.5rem;
}
.second_box .second_center .second_time span{
   display: inline-block;
   width: 23%;
   height: 1.5rem;
   margin: 0.2rem auto;
   border: gray solid 0.02rem;
   margin-bottom: 0.2rem;
}
.second_box .second_center .second_time span:hover{
   background-color: #00b0ec;
   color:#fff;
}
.second_bottom span{
   display: inline-block;
   width: 23%;
   height: 1.5rem;
   margin: 0.2rem auto;
   border: gray solid 0.02rem;
   font-size: 0.9rem;
   text-align: center;
}
.second_btn{
   width:95%;
   margin:0 auto;
}
.second_btn .again_btn,.sure_btn{
   display: inline-block;
   width: 45%;
   height: 2rem;
   line-height: 2rem;
}
.second_btn .again_btn{
   border: #00b0ec solid 0.05rem;
   border-radius: 0.2rem;
   color: #00b0ec;
}
.second_btn .sure_btn{
   background-color: #00b0ec;
   border-radius: 0.2rem;
   color: #fff;
}
.third_sort{
   width: 95%;
   margin:0 auto;
}
.third_sort p{
   display: inline-block;
   width: 95%;
   height:3rem;
   text-align: left;
   padding-left:1rem;
   padding-top: 1rem;
   border-bottom: #e1e1e1 solid 0.02rem;
}
.third_sort p span{
   border-bottom: 0.15rem solid #f39800;
   border-right: 0.15rem solid #f39800;
   display: inline-block;
   height: 1.8rem;
   transform: rotate(45deg);
   width: 1rem;
   margin-right: 1rem;
   margin-top: -0.5rem;
   float: right;
}
.third_sort p:hover{
   background-color: #00b0ec;
   color:#fff;
}
.last_box{
   width: 90%;
   height: 100%;
   margin:0 auto;
}
.last_box .last_city{
   text-align: left;
   padding-left: 0.5rem;
   margin-top: 0.5rem;
   font-size: 1.2rem;
   line-height: 2rem;
}
.last_box .last_city i{
   margin-left: 14rem;
}

.last_city_list span{
   display: inline-block;
   width: 23%;
   height: 1.5rem;
   border: #e1e1e1 solid 0.02rem;
   margin-bottom: 1rem;
}
.last_city_list span:hover{
   background-color: #00b0ec;
   color:#fff;
}
.last_city_list2{
   margin-left: 0;
   text-align: left;
   margin-bottom: 1rem;
}
.last_city_list2 span{
   display: inline-block;
   width:23%;
   height: 1.5rem;
   border: #e1e1e1 solid 0.02rem;
   padding-left: 0.6rem;
}
.last_city_list2 span:hover{
   background-color: #00b0ec;
   color:#fff;
}
</style>
